<template>
  <div class="container">
    <h1 class="page-title">健身房合作招商</h1>

    <section class="advantages">
      <h2>合作优势</h2>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="advantage-item">
            <h3>品牌支持</h3>
            <p>我们拥有强大的品牌影响力，为您提供全方位的品牌支持。</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="advantage-item">
            <h3>专业团队</h3>
            <p>
              我们的团队由经验丰富的健身教练和管理人员组成，为您提供专业的运营支持。
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="advantage-item">
            <h3>营销推广</h3>
            <p>
              我们有一套完善的营销推广方案，帮助您快速吸引客户，扩大市场份额。
            </p>
          </div>
        </el-col>
      </el-row>
    </section>

    <section class="process">
      <h2>合作流程</h2>
      <el-steps :active="1" finish-status="success" simple>
        <el-step
          title="初步沟通"
          description="了解您的需求，提供合作方案"
        ></el-step>
        <el-step
          title="签订协议"
          description="双方签订合作协议，明确权利和义务"
        ></el-step>
        <el-step
          title="开业准备"
          description="提供开业前的培训和支持，确保顺利开业"
        ></el-step>
        <el-step
          title="持续支持"
          description="提供持续的运营支持和市场推广"
        ></el-step>
      </el-steps>
    </section>

    <section class="contact">
      <h2>联系我们</h2>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form label-position="top" label-width="100px">
            <el-form-item label="姓名">
              <el-input
                v-model="contactForm.name"
                placeholder="请输入您的姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input
                v-model="contactForm.phone"
                placeholder="请输入您的联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="contactForm.email"
                placeholder="请输入您的邮箱地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="留言">
              <el-input
                v-model="contactForm.message"
                type="textarea"
                :rows="4"
                placeholder="请输入您的留言"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <div class="contact-info">
            <h3>联系方式</h3>
            <p><strong>热线电话:</strong> 400-123-4567</p>
            <p><strong>邮箱:</strong> info@example.com</p>
            <p><strong>地址:</strong> 上海市浦东新区陆家嘴环路1000号</p>
            <p><strong>标语:</strong> 专业服务，健康生活</p>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>
  <script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const contactForm = ref({
  name: "",
  phone: "",
  email: "",
  message: "",
});

const submitForm = () => {
  if (!contactForm.value.name.trim()) {
    ElMessage.error("请输入您的姓名");
    return;
  }
  if (!contactForm.value.phone.trim()) {
    ElMessage.error("请输入您的联系电话");
    return;
  }
  if (!contactForm.value.email.trim()) {
    ElMessage.error("请输入您的邮箱地址");
    return;
  }
  if (!contactForm.value.message.trim()) {
    ElMessage.error("请输入您的留言");
    return;
  }

  // 这里可以添加实际的表单提交逻辑，例如发送请求到服务器
  ElMessage.success("感谢您的留言，我们会尽快与您联系");
};
</script>
  <style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f0f2f5;
}

.el-breadcrumb {
  margin-bottom: 20px;
  color: #909399;
}

.page-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #303133;
}

.advantages {
  max-width: 1200px;
  width: 100%;
  margin-bottom: 40px;
}

.advantage-item {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.advantage-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #303133;
}

.advantage-item p {
  font-size: 14px;
  color: #606266;
}

.process {
  max-width: 1200px;
  width: 100%;
  margin-bottom: 40px;
}

.process h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #303133;
}

.contact {
  max-width: 1200px;
  width: 100%;
  margin-bottom: 40px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.contact h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #303133;
}

.el-form {
  max-width: 600px;
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
  max-width: 300px;
}

.contact-info {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: left;
}

.contact-info h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #303133;
}

.contact-info p {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}

.contact-info strong {
  color: #303133;
}
</style>